<template>
  <svg :class="['pui-svg', size, className, role && 'pui-loading']" :style="{ fill: color }" aria-hidden="true">
    <use :xlink:href="`#pui-icon-${name}`"></use>
  </svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'puiSvg',
});
</script>

<script setup lang="ts">
interface Props {
  name: string;
  size: string;
  className: string;
  color: string;
  role: boolean;
}

withDefaults(defineProps<Props>(), {
  name: '',
  color: '',
  className: '',
  size: 'normal',
  role: false,
});
</script>
